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So you've all seen sessions in the past where people show 
aspirational graphical tech demos to showcase the maximum 
extents of the hardware? 


This session isn't one of those. 


In my experience, tech demos are great, but they're also 
misleading. I'm more interested in the practical aspects of 
delivering high end mobile graphics. 

Once you factor in gameplay code, UI, networking etc, your 
available resources for graphics will look very different. 

For reasons I'll explain later, this is especially pertinent for 
mobile. 
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CSR Racing 2 is used here as a case study. 

It's a drag racing game (made in Unity 4, for iOS and 
Android). 




Based around the development of CSR2's environment pipeline 
(there is a separate presentation about the vehicle pipeline). 


From the outset, we knew we would face challenges in 
development. 

For context, the challenge we faced can be surmised in a 
single image. 
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This is the original CSR Racing from 2012 


Played by 2% of the world's population - one of the largest 
install bases of any racing game in existence 


We'll talk about its focus on graphics for the benefit of the 
discussion 


At the time, considered some of the best visuals on mobile. 
CSR2 would have to be a generational leap 


Internal mission statement: "It needs to look like a AAA 
console game" 
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Also 

The game needs to support every device from the last four 
years. 


LLlii 


That's 19 iOS devices and roughly 2500 Android devices. 


All with extremely varied specs... 



Would be the equivalent of making a PS4 game, that also runs 
on Dreamcast, and supports every console in between. 



Plus, we also wanted to support both night time and wet 
weather variations for our environments 
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Environment-Specific Goals 

The environments need to support wet weather and night 
effects... 

...and maintain 30fps on all devices 
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all while maintaining a 30fps frame rate on all devices. 
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Not to beat around the bush, but we succeeded! 


Here's that shot from CSR1 again... 
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...and a comparable shot from CSR2 
But this result was not immediate 

In fact, when we first started, our first playable build looked 
more like this... 





It was a deliberate exercise in trying to work within safe 
budgets. 


But while an environment like this would guarantee no 
performance or memory problems on any device, the visual 
quality just wasn't there 


Going back to the original mission statement: "Is this console 
quality?" No 
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Following this, our art director made a paint-over image, using 
the pre-pro environment. 


The result was still below our visual target, but provided a 
valuable benchmark for the art and tech teams. 




Need to stop trying to do everything on every device, and 
trust that the audience is savvy enough to expect that newer 
devices = better visuals 

AAA has had this concept for decades. So far, mobile hasn't 


Because of this, there is no immediate frame of reference for 
how to scale successfully. Need to look to AAA for guidance 



How AAA games were made in the PS3 era. 

Core visuals built for low spec, superficial improvements for 
the high spec (texture res, post FX, shaders etc) 


Always limited to the specs of the lowest platform. 



Doesn't work well for DLC. 

Doesn't work well for the long product paths that mobile is 
known for. 

Doesn't work well for pushing high end quality as far as 
possible. 



How AAA games are made now. 


Build for top spec, and remove features to fit on the lower 
specs. 


The result is less consistent between platforms, but ultimately, 
higher quality overall. 



Without naming names, we've all seen comparison videos on 
Youtube where games have massive quality disparities 
between their low to high platforms. 


We didn't want to do that. 
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CSR2 is... 



HIGHEST SPEC 



\ 



LOWEST SPEC 






We opted to use a mainly top-down approach, tempered with 
elements of bottom-up to preserve quality as much as 
possible. 
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iOS CPU Mark Rating (1st March 2016) 



iPad6J 


iPad Air (teBulo) 
W44 


IPad MW 2 (wifi) 
iPad MW 3 (ccfiular) 
iPad MW 3 (wifi) 
iPad 4 (wifi) 
iPad 4 (GSM) 


^honcS (GSM) 
iPhones (COMAS) 
iPad 2 (CDMAV) 

iPad 2 (GSM) 
iPad 2 (COMAS) 
iPad 3 (wifi) 
iPad MW (wifi) 
iPad MW (COMA) 
iPad MW (GSM) 
iPad 3 (COMA) 
iPad 3 (GSM) 
iPod Touch S 
Vhone 4S 



If we're going to work this way, we need to build to fewer 
target devices! 


The beauty of mobile is that devices are released annually, 
and each rollout tends to broadly fall within a discrete range of 
specs, regardless of manufacturer. 
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iOS CPU Mark Rating (1st March 2016) 




VERY HIGH 


iPad Aa> (wifi) | 
iPad Aar (crlulaK) | 


iPhone SS Uto bail | 
iPhone SS (GSM) | 
iPad MM 7 |<rUa| | 
iPad Mini 2 {wifi) | 
iPad MM J (<c»ul«) I 


HIGH 


MEDIUM 



We defined four theoretical quality levels (very high, high, 
medium, and low). 

Treating each one as its own platform, in much the same way 
as a PC game would do. 




At this point, we know what we're building to, but not how to 
build it. 



Didn't want to keep re-authoring each environment for every 
quality level. 


Conventional wisdom for mobile is to build each environment 
as one large model to reduce draw calls, but this comes at the 
cost of poly counts and memory. 


We went against that and instanced a lot of the detail. 

Between this and material sharing, the memory was quite low, 
even with high poly meshes. 


We took a hit on draw calls. Draw calls are more readily 
scalable than polygons. 


The Plan 

1) Use the same data set for all platforms 

2) Any rendering feature needs to scale 
gracefully 


This one is important, since we're using a top-down approach 
in a sensible way. 


Features must be additive to quality by definition. 


If a feature would leave the game looking worse or broken by 
its absence, then we couldn't use it. 


Example: Procedural textures. 



With this in mind, we knew some features would have obvious 
problems with platform scalability. 


So we chose not to investigate them. 
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How that looks in practice... 
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"Low" 


All post effects and specular disabled 
30 draw calls, 20MB memory 
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"Medium" 


ULLft 


colour grading and dynamic exposure enabled 
Higher res geometry 


200 draw calls, 100MB memory 



Physically based specular enabled. 
Post effects enabled. 


300 draw calls. 
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"Very High" 


As before, but with more accurate fresnel and motion blur 



I 


■i android 




I've included this slide to illustrate a point about multi-platform 
development. 


While different devices may fit within the same quality level, 
comparable hardware doesn't always mean the same hardware. 


Due to differences in thermal throttling and optimisation of graphics 
drivers, Android has very different authoring requirements to iOS. 
Even when working to the theoretical quality levels, some low level 
optimisation will always be needed. 


In this case, we didn't have as much CPU to work with as iOS, but 
we had more memory. 


Wrote custom static batching pipeline into our export process. 
Reduced draw calls with an acceptable memory increase. Got to the 
same result, by playing to the strengths of the hardware. 



Building pipeline as they work, to ensure that the pipelines are 
genuinely useful. 


Found that any feature would fit within three categories. 
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Some features received a lot of our GPU. 


LI ■■ 


Some features are very important, and require a lot of GPU. 



Others are still important. But to do everything you want to, 
you need to find more creative solutions. 
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Some features received a lot of our GPU. 


Other features were emulated to provide a desired effect. 


Some features were a mixture of the two approaches. 


Li_LLk 


Some features are a bit of both. 


Rendering spend defined by priority. 



Some features received a lot of our GPU. 

Example 1: Physically Based Shading 


Other features were emulated to provide a desired effect. 

Example 2: HDR 


Some features were a mixture of the two approaches. 

Example 3: Post Effects 



Going to cover one example of each 
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Example 1: Physically Based Shading 



Completely bespoke solution. Evaluated Unity 5's solution, but 
didn't use it. 


Mostly inherited from our vehicle pipeline; with the additions 
of real time directional specular for the sun, lightmaps for 
diffuse lighting, etc. 


The fundamentals of PBS have been covered in many other 
presentations, so I won't do it here. 


New material pipeline had immediate value. 


Allowed us to use both authored cubemaps and real life HDR 
images as testbed environments. We could use these to define 
material libraries and test incoming assets from the 
outsourcers. 
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Workflow - Shader Debug Tool 



Typically, features beget workflow. It transpires that writing 
your own Tenderer necessitates custom tools! 


Specifically, the artists needed a way to view and analyse the 
various layers of their materials. Also, they needed to be able 
to preview the effects of the device scalability. 


Not forward rendered. We wrote this pipeline, that dynamically 
edits shaders 



Each shader would reference a single uber-shader that 
controlled everything. 


This uber-shader would reference a separate file, that stored 
preprocessor directives ("#defines") for each rendering layer. 
When one #define was enabled, it would enable this rendering 
layer for all shaders simultaneously. 


The Shader Debug Tool would directly edit this file, and enable 
the #defines based on the artists' input. 
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Example 2: HDR 



Our approach to HDR was one of the key features that we had 
to approximate. 


We knew from the outset that a true HDR pipeline would have 
problems with scalability, but we still needed the effect. 


It can be done on high end devices. But as discussed, we also 
need to support the lower devices as much as possible. 


Plus, even for the high spec platforms, we had a lot of features 
to support. 



Exposure Adaptation: 

We wanted the exposure to change as the player drove along 
the track. 


Because we have an LDR Tenderer, a white piece of paper is 
considered as bright as the sun. 
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LIM 


Separate the cars, world, and sky; affecting their exposures 
independently of each other. 


These variables would be affected by artist-authored trigger 
boxes that were placed along the track. 
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Bloom: 


Basically the same problem as the exposure adaptation. 


How do we avoid affecting the bloom range of any white 
objects in the scene? 


The three-layer exposure approach wouldn't work here, as (in 
the above example), what if we only wanted to affect some of 
the environment instead of all of it? 
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We were able to recycle the alpha of the frame buffer as mask 
for bloom effects 
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In the bloom shader... 


result *= l-tex2D(_MainTex, f.uvhaaaa 


Relatively cheap line of shader code that is very powerful. 



GDC 


GAME DEVELOPERS CONFERENCE March 14-18, 2016 - Expo: March 16-18, 2016 #GDC16 


Here is a shot without any bloom 
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If we wanted strong glints on the cars, we can mask the 
bloom to only affect the extremes of the vehicle specular. 
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If we wanted an over-exposed sky, we can mask the bloom to 
only affect the sky. 
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What if we wanted to do volumetric lighting, where any 
emissive elements appear to light the surrounding fog? 


For this, we can simply mask the bloom to the emissive 
materials, then reduce that mask, based on the distance of the 
fog. 



Like this 
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Example 3: Post Effects 



Because of our previous decisions on the Tenderer, we were 
able to improve and add to the post effects pipeline by 
leveraging our existing systems. 



Out initial motion blur: Recycled blur from bloom shader 
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Vignette Tenderer recycled into a separate effect 


»■ 



Which gives us this result (as released on high spec devices) 




Later replaced with a gaussian blur on very high end devices 
Blur the bloom at a different rate for effect of HDR motion blur. 


Four features for the development cost of one! 
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About those weather and night 
effects... 



Most of the other features for post effects were borne from 
supporting weather and night effects 



Wet weather became our showcase for everything we can do 
in the post FX pipeline. 


Defined a lot of requirements for what we would need to 
support. 


We knew we'd need colour grading, and some full screen 
effects (rain on lens) 


Wet roads are a very simple thing to do with physically based 
shaders. 

Heavy fog, height fog, soft flares, sky bloom 
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Night time; basically the same elements. 

Change window illumination, change shape of lens flares etc 


Through the use of various global scope shader constants, we 
could create very different scenes, without changing the scene 
or materials 




Post Effects: 

Grade 

Saturation 

Motion blur (and lens effects) 
Specular features: 

LDR scale 
LDR offset 
Real time sun scale 
Wet road 

Night time window illumination 
Material level effects: 

Height fog 
Impact splashes 
Vignette 
Post effects: 

Bloom 
Sky bloom 


60 







Feature scalability per device is essential to achieving the 
highest possible visual quality 



Expect to be creative with some features. I remember a GDC 
presentation from 2011: "in three years, mobile devices will 
be as powerful as Xbox 360s". This happened, but as I 
mentioned before, comparable hardware is not the same 
hardware. You'll always be looking for ways to get the most of 
the mobile hardware. 



Give some thought about how to best support future devices 
that release after your game does. 


For example, the iPad Pro came out after we soft launched, 
and it doubled the specs that even our highest devices 
previously supported. The question is "how to spend this extra 
GPU". 


Top-down development in its purest form won't work here; 
you can't delete features on an already-existing product, just 
to support something new. 

Bottom-up development will only provide superficial 
improvements. 
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Good news, we're hiring! 


If you like what you've seen and are interested in being part 
of the great work we're doing, come see our recruitment 
team as we're hiring. 


